<template>
  <div class="scale-view"  ref="appRef"
    :style="{
      width: baseWidth + 'px',
      height: baseHeight + 'px',
    }"
    :class="isFullScreen ? 'full': ''"
  >
    <slot />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, nextTick } from 'vue'
  import { useStore } from 'vuex'
  // import { useIndex } from '@/utils/windowScale'
  const appRef = ref(null);
  const baseWidth = 1920
  const baseHeight = 1080

  const store = useStore()
  const isFullScreen = computed(() => {
    return store.state.setting.isFullScreen
  })

  const windowDraw = () => {
    window.addEventListener('resize', ()=> {
      debounce(calcRate())
    })
  }

  const calcRate = () => {
    let scale = 1
    const wh = window.innerHeight / baseHeight;
    const ww = window.innerWidth / baseWidth;
    scale = ww < wh ? ww : wh;
    if(appRef.value) {
      appRef.value.style.transform = `scale(${scale}) translate(-50%, -50%)`
    }
  }

  const debounce = (fn, delay?) => {
    const delays = delay || 500;
    let timer;
    return function () {
      const th = this;
      const args = arguments;
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(function () {
        timer = null;
        fn.apply(th, args);
      }, delays);
    }
  }

  onMounted(() => {
    nextTick(() => {
      calcRate();
    })
    windowDraw();
  })
</script>

<style scoped lang="scss">
.scale-view {
  width: 1920px;
  height: 1080px;
  position: absolute;
  transform-origin: 0 0;
  top: 50%;
  left: 50%;
  &.full {
    position: fixed;
    z-index: 9999;
  }
}
</style>